<template>
    <div class="container">
        <!-- 头部 -->
        <el-row>
            <div class="row_Left">
                <div class="line"></div>
                <div class="title">部门管理</div>
                <el-input
                    placeholder="请输入部门名称"
                    v-model="search"
                    class="seachName"
                >
                </el-input>
                <el-button type="primary" class="search" @click="goSearchDepartment">
                    <el-icon style="margin-right:5px"><Search /></el-icon>
                    搜索
                </el-button>
            </div>
            <div class="row_Right">
                <el-button type="primary" link class="addBtn" @click="goAddDepartment">
                    <img src="../../assets/images/加号.png" alt="">
                </el-button>
            </div>
        </el-row>
        <!-- 部门 -->
        <footer class="departmentShow">
            <template v-for="item in departmentList" :key="item.departmentId">
                <div class="departmentBox">
                    <header class="boxTop">
                        <el-button link type="success" @click="goModifyDepartment(item)">修改</el-button>
                        <el-button link type="danger">删除</el-button>
                    </header>
                    <article class="boxBottom">
                        {{ item.departmentName }}
                    </article>
                </div>
            </template>
        </footer>
        <!-- 添加模态框 -->
        <el-dialog :title="operateFlag == 0 ? '添加部门' : '修改部门'" :show-close="false" v-model="dialogFlag">
            <el-form ref="myForm" :rules="rules" :model="addDepartmentData">
                <el-form-item style="margin-top:5px;" prop="departmentName">
                    <el-input
                        v-model="addDepartmentData.departmentName"
                        placeholder="请输入部门名称"
                    ></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button @click="dialogFlag = false">取消</el-button>
                    <el-button v-if="operateFlag == 0" @click="sureAddDepartment(myForm)">确定</el-button>
                    <el-button v-if="operateFlag == 1" @click="sureModifyDepartment(myForm)">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import '../../assets/header.css'
import { getDepartmentList,addDepartment,getDepartmentNews,modifyDepartment } from '../api/Department';
import { ElMessage, ElMessageBox } from 'element-plus';
let search = ref("")//搜索
let departmentList = ref([])//部门列表
let departmentListData = reactive({
    search:search.value
})
//调取部门列表
let departmentListFun = () => {
    departmentListData = reactive({
        search:search.value
    })
    getDepartmentList('departmentList',departmentListData)
    .then(res => {
        if(res.code == 200){
            departmentList.value = res.dataset.departmentList
            // console.log(departmentList.value);
        } 
    })
}
//点击搜索
let goSearchDepartment = () => {
    departmentListFun()
}
let dialogFlag = ref(false)//模态框开关
let myForm = ref("")
let addDepartmentData = reactive({
    departmentName:'',//部门名称
})
//表单验证规则
const rules = reactive({
    departmentName:[{required:true,message:'请输入部门名称',trigger:'blur'}]
})
let operateFlag = ref(0)//判断0：添加 1：修改
//点击添加
let goAddDepartment = () => {
    addDepartmentData.departmentName=''
    dialogFlag.value = true
    operateFlag.value = 0
}
//点击确定添加
let sureAddDepartment = formEl => {
    formEl.validate(valid => {
        if(valid){
            addDepartment('addDepartment',addDepartmentData)
            .then(res => {
                if(res.code == 200){
                    ElMessage.success('添加成功')
                    departmentListFun()
                    addDepartmentData.departmentName=''
                    dialogFlag.value = false
                }
            })
        }
    })
}
//点击修改
let departmentId = ref('')//用户Id
let goModifyDepartment = item => {
    console.log(item);
    operateFlag.value = 1
    dialogFlag.value = true
    getDepartmentNewsFun(item.departmentId)
    departmentId.value = item.departmentId
    addDepartmentData.departmentName=item.departmentName
}
//点击确认修改
let sureModifyDepartment = formEl => {
    formEl.validate(valid => {
        if(valid){
            ElMessageBox.confirm(
                '确定要修改改部门吗?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                let modifyDepartmentData = {
                    departmentId:departmentId.value,
                    departmentName:addDepartmentData.departmentName
                }
                modifyDepartment('updateDepartment',modifyDepartmentData)
                .then(res => {
                    if(res.code == 200){
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        departmentListFun()
                        dialogFlag.value = false
                    }
                })
            })
        }
    })
}
// 根据部门ID查询部门信息
let getDepartmentNewsFun = departmentId => {
    // console.log(departmentId);
    getDepartmentNews('departmentById',{departmentId:departmentId})
    .then(res => {
        if(res.code == 200 && operateFlag.value == 1){
            addDepartmentData.departmentName=res.dataset.departmentName
        }
    })
}
onMounted(() => {
    departmentListFun()
})
</script>

<style lang="less" scoped>
.departmentShow{
    width:90%;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
    min-width: 1000px;
    .departmentBox{
       width: 150px;
        height: 150px;
        margin-top: 20px;
        margin-right: 11px;
        background-color: #fff;
        border-radius: 25px;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        .boxTop{
            display: flex;
            margin-top: 10px;
            justify-content: flex-end;
            font-size: 15px;
            .el-button{
                margin-left: 10px;
                margin-right: 10px;
                font-size:15px;
            }   
        }
        .boxBottom{
            margin-top: 31px;
            text-align: center;
            font-size: 20px;
        }
    }
    .departmentBox:hover{
        transform: translateY(-5px);
    }
}
.el-dialog{
    .el-form {
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:20px;
        :deep(.el-input__wrapper){
            height:50px;
            .el-input__inner{
                text-align: center;
            }
        }
        .btns{
            box-sizing: border-box;
            padding-top:16px;
            padding-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            :deep(.el-form-item__content){
                justify-content: center;
            }
            .el-button{
                background-color: #0f6ab1;
                color: white;
            }
        }
    }
}
</style>